/* components */
import { RoleViewHeader, RoleViewTabsForView } from '@src/modules/account/roleModule/component'
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* hooks */
import { useRoleViewAuth, useRoleViewTree } from "@src/modules/account/roleModule/hooks"
import { useStoreCurrentSelectRole, useStoreInitData, useStoreRoles } from "@src/modules/account/roleModule/store/hooks"
/* model */
import Role from '@model/entity/Role/Role'
/* vue */
import { ComponentInstance, ComputedRef, defineComponent, ref } from 'vue'
import {t} from '@src/locales'

export type RoleViewContentStayAllotViewHeaderProps = {
  keyword: string;
}

export interface RoleViewContentStayAllotViewHeaderSetupState {
  currentSelectRole: ComputedRef<Role>;
}

export enum RoleViewContentStayAllotViewHeaderEventEnum {
  Input = 'input',
  Change = 'change',
  Allot = 'allot',
  Default = 'default'
}

export type RoleViewContentStayAllotViewHeaderEmitsOptions = {
  input: () => void;
}

export type RoleViewContentStayAllotViewHeaderInstance = ComponentInstance & RoleViewContentStayAllotViewHeaderSetupState
export type RoleViewContentStayAllotViewHeaderVM = RoleViewContentStayAllotViewHeaderSetupState & RoleViewContentStayAllotViewHeaderProps & ComponentInstance

export default defineComponent({
  name: ComponentNameEnum.RoleViewContentStayAllotViewHeader,
  props: {
    keyword: {
      type: String,
      default: ''
    }
  },
  emits: [
    RoleViewContentStayAllotViewHeaderEventEnum.Input,
    RoleViewContentStayAllotViewHeaderEventEnum.Change,
    RoleViewContentStayAllotViewHeaderEventEnum.Allot,
    RoleViewContentStayAllotViewHeaderEventEnum.Default
  ],
  setup(props: RoleViewContentStayAllotViewHeaderProps, { slots, emit }) {
    
    const { auths } = useStoreInitData()
    const { currentSelectRole } = useStoreCurrentSelectRole()
    
    const { canBatchAllot, canDefaultAllotUser } = useRoleViewAuth()
    
    function handlerKeywordInput(value: string) {
      emit(RoleViewContentStayAllotViewHeaderEventEnum.Input, value)
    }
    
    function handlerKeywordChange(value: string) {
      emit(RoleViewContentStayAllotViewHeaderEventEnum.Change, value)
    }
    
    function handlerBatchAllotButtonClick() {
      emit(RoleViewContentStayAllotViewHeaderEventEnum.Allot)
    }
    
    function handlerDefaultAllotButtonClick() {
      emit(RoleViewContentStayAllotViewHeaderEventEnum.Default)
    }
    
    return {
      canBatchAllot,
      canDefaultAllotUser,
      currentSelectRole,
      handlerKeywordInput,
      handlerKeywordChange,
      handlerBatchAllotButtonClick,
      handlerDefaultAllotButtonClick
    }
    
  },
  render() {
    return (
      <div class={ComponentNameEnum.RoleViewContentStayAllotViewHeader}>
        <div class={ComponentNameEnum.RoleViewUserContentHeader}>
          <el-input
            class="role-view-user-content-header__input"
            placeholder={t('common.placeholder.inputKeywordToSearch' ,{ data1: ''})}
            value={this.keyword}
            onInput={this.handlerKeywordInput}
            onChange={this.handlerKeywordChange}
          >
            <i slot="prefix" class="el-input__icon el-icon-search">
            </i>
          </el-input>
          
          {this.canBatchAllot && (
            <el-button
              type="primary" 
              class="role-view-user-content-header__add-button" 
              onClick={this.handlerBatchAllotButtonClick}
            >
              {t('common.base.batchAllot')}
            </el-button>
          )}
          
          {this.canDefaultAllotUser && (
            <el-button
              type="primary" 
              class="role-view-user-content-header__add-button" 
              onClick={this.handlerDefaultAllotButtonClick}
            >
              {t('common.base.allotDefaultRole')}
            </el-button>
          )}
          
      </div>
      </div>
    ) as any
  }
}) as any
